﻿@{
    ViewBag.Title = "ajax后台分页表格";
    ViewBag.PageHead = NameValueList.Add(
        ViewBag.Title, ViewBag.Title,
        "控制台", Url.Action("Index", "Admin"),
         "表格", Url.Action("Index", "AdminTable"),
         ViewBag.Title, "javascript:;"
        );
}
@section Head{
    <link rel="stylesheet" href="~/Content/DT_bootstrap.css" />
}


<div class="span12">
    <!-- BEGIN EXAMPLE TABLE PORTLET-->
    <div class="portlet box light-grey">
        <h4>Ajax传递分页,排序,过滤数据到后台,后台数据库分页后返回指定结果,调用初始化函数完成前端分页排序及搜索</h4>
        <p>更多查看官网API:<a href="https://www.datatables.net">https://www.datatables.net</a></p>
        <table class="table table-striped table-bordered table-hover" id="sample">
            <thead>
                <tr>
                    <th>Name</th>
                    <th>Position</th>
                    <th>Office</th>
                    <th>Extn.</th>
                    <th>Start date</th>
                    <th>Salary</th>
                </tr>
            </thead>
        </table>
    </div>
</div>

@section scripts{
    <script type="text/javascript" src="~/Scripts/jquery.dataTables.js"></script>
    <script type="text/javascript" src="~/Scripts/DT_bootstrap.js"></script>
    <script>
        $(function () {
            Index.initMenu("3-4");
            $("#sample").dataTable({
                language: Index.tableLanguage("用户名/Email关键字搜索  "),
                "processing": true,
                "serverSide": true,
                //ordering: false,
                searching: false,
                //info:false,
                ajax: {
                    type: "post",
                    url: "/AdminTable/AjaxDBPage_Post",
                    //data: function (d) {//d 是原始的发送给服务器的数据，默认很长。
                    //    var param = {};//因为服务端排序，可以新建一个参数对象
                    //    param.start = d.start;//开始的序号
                    //    param.length = d.length;//要取的数据的
                    //    var formData = $("#filter_form").serializeArray();//把form里面的数据序列化成数组
                    //    formData.forEach(function (e) {
                    //        param[e.name] = e.value;
                    //    });
                    //    return param;//自定义需要传递的参数。
                    //}
                },
                columnDefs: [{
                    targets: [0, 1, 2, 4],  //指定的列
                    //"targets": 'nosort',//列包含名字
                    orderable: false,//禁用排序
                    searchable:false//禁用搜索
                }],
                columns: [
                     { "data": "Name" },
                     { "data": "Position" },
                     { "data": "Office" },
                     { "data": "Extn" },
                     {
                         "data": function (e) {//{"StartDate" },
                             if (e.StartDate) {
                                 return new Date(Number(e.StartDate.replace(/\D/g, ''))).toLocaleDateString()
                             }
                             return "-";
                         }
                     },
                     { "data": "Salary" },
                     //{data:function(d){  //自定义显示
                     //    if (e.office) {
                     //        return new Date(Number(e.office.replace(/\D/g, ''))).toLocaleDateString()
                     //    }
                     //    return "-"
                     //    }}
                     ]
            });
        });
    </script>
}


